@extends('admin.layout.app')

@section('title')
    职位管理
@endsection

@section('content') 
	@component('admin.components.nav') 
	@endcomponent
		<!--main-->
		<main v-cloak>
			<div class="container">
				<div class="breadcrumb">
					<div class="row">
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
							<h3>职位管理</h3>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
							<form action="" class="form-inline form-search">
								<div class="form-group">
									<label class="sr-only" for="search-input">搜索</label>
									<input id="search-input" type="search" class="form-control" placeholder="输入职位名称" v-model="keywords">
								</div>
								<button type="button" class="btn btn-primary btn-search" @click="search">搜索</button>
							</form>
						</div>
					</div>
				</div>
				<div class="data-table table-responsive">
					<table class="table table-striped table-hover">
						<thead>
							<tr>
								<th>编号</th>
								<th>职位</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<th scope="row">@{{item.id}}</th>
								<td>@{{item.name}}</td>
								<td>@{{item.description}}</td>
								<td><a @click="openEdit(item)">编辑</a></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="action-panel">
					<div class="row">
						<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
							<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form"><span class="glyphicon glyphicon-plus" aria-hidden="true" ></span>新增</button>
						</div>
						<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
							<span>共@{{total}}条</span>
							<span>@{{current_page}}/@{{last_page}}页</span>
							<nav class="nav-pager" aria-label="...">
							  <ul class="pager">
							    <li :class="{disabled:current_page<=1}"><a :disabled="current_page<=1" @click="pageTurn(-1)"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a></li>
							    <li :class="{disabled:current_page>=last_page}"><a :disabled="current_page>=last_page" @click="pageTurn(1)"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></li>
							  </ul>
							</nav>
							<form action="" class="form-inline form-pager">
								<div class="form-group">
								    <label for="page-number">跳转到</label>
								    <input type="number" id="page-number" class="form-control" placeholder="" v-model="turn_page">
								</div>
								<button type="button" class="btn btn-primary btn-goto" :disabled="!turn_page || turn_page>last_page" @click="toPage">GO</button>
							</form>
						</div>
					</div>
				</div>
				<div class="modal fade modal-form" tabindex="-1" role="dialog" id="modal-form">
				  <div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title"></h4>
				      </div>
				      <div class="modal-body">
				        	<form class="form-horizontal" action="">
				        		<div class="row">
				        			<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
										<div class="form-group">
										   <label for="" class="col-sm-3 control-label">职位</label>
										   <div class="col-sm-9">
										   		<input type="text" class="form-control" id="" placeholder="" v-model="formData.name">
										   	</div>
										</div>
				        				<div class="form-group">
										   <label for="" class="col-sm-3 control-label">备注</label>
										   <div class="col-sm-9">
										   		<input type="text" class="form-control" id="" placeholder="" v-model="formData.description">
										   	</div>
										</div>
				        			</div>
				        		</div>
				        	</form>
				      </div>
				      <div class="modal-footer">
				        <button type="button" data-loading-text="正在提交" class="btn btn-primary" @click="submitForm">确认</button>
				      </div>
				    </div><!-- /.modal-content -->
				  </div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
			</div>
		</main>
@endsection

@section('script')
	<script type="text/javascript">
		var activeIndex = 1
	</script>
	<script src="/admin/js/nav.js" type="text/javascript"></script>
	<script src="/admin/js/position.js" type="text/javascript"></script>
@endsection